<template>
	<wsPage title="数据字典">
		<div slot="page_operate">
			<Button><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>

		<wsSmPanel>
			<div slot="list_operate">
				<Button type="primary" @click="showAddModal">新增字典</Button>
				<Button @click="fefreshCache">刷新缓存</Button>
			</div>
			<div slot="list_data">
				<div class="title-row">
					<span style="">当前路径:</span>
					<span v-for="(item, index) in history.parents">
						<span v-if="index > 0" style="padding: 0 3px;">></span>
					<a @click="listParent(item, index)" v-text="item.name"></a>
					</span>
				</div>
				<ws-table :data="table.datas" style="width: 100%">
					<ws-table-column label="字典键" min-width="180">
						<template slot-scope="scope">
							<a v-text="scope.row.wKey" @click="listChilds(scope.row)"></a>
						</template>
					</ws-table-column>
					<ws-table-column label="显示名称" min-width="180" prop="displayName"></ws-table-column>
					<ws-table-column label="顺序" width="80" prop="listIndex" align="center"></ws-table-column>
					<ws-table-column label="显示值" min-width="180" prop="wValue" show-overflow-tooltip></ws-table-column>
					<ws-table-column align="center" width="120" label="操作">
						<template slot-scope="scope">
							<Button @click="showEditModal(scope.row)" type="text" size="small">编辑</Button>
      					</template>
					</ws-table-column>
				</ws-table>
			</div>
		</wsSmPanel>

		<!--新增弹框-->
		<wsModal v-model="modal1.show" ok-text="保存" title="新增字典项" @on-ok="saveModal1" @on-cancel="cancelModal1">
			<Form ref="modal1" :model="modal1.model" :rules="modal1.rules" :label-width="100">
				<FormItem label="键" prop="wKey">
					<Input v-model="modal1.model.wKey" placeholder="请输入键"></Input>
				</FormItem>
				<FormItem label="显示名称" prop="displayName">
					<Input v-model="modal1.model.displayName" placeholder=""></Input>
				</FormItem>
				<FormItem label="排序号" prop="listIndex">
					<InputNumber :max="100" :min="1" v-model="modal1.model.listIndex"></InputNumber>
				</FormItem>
				<FormItem label="值" prop="wValue">
					<Input type="textarea" v-model="modal1.model.wValue" placeholder=""></Input>
				</FormItem>
			</Form>
		</wsModal>
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {
				table: {
					datas: []
				},
				form: {
					curParentId: '-1', //当前的父节点
					paths: [] //显示层级路径
				},
				//新增弹框
				modal1: {
					show: false,
					model: {
						id: '',
						parentId: '',
						wKey: '',
						displayName: '',
						listIndex: 1,
						wValue: ''
					},
					rules: {
						wKey: [{
							required: true,
							message: '请输入键内容'
						}]
					}
				},
				history: {
					pages: [],
					parents: [{
						name: '首页',
						id: -1
					}]
				}
			}
		},
		computed: {
			/**
			 * 是否为顶级
			 */
			isPLevel() {
				return '-1' === this.form.curParentId;
			},
			/**
			 * 当前的modal1是否为编辑状态
			 */
			isEdit() {
				return !Util.vad.isBlank(this.modal1.model.id);
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			/**
			 * 初始化
			 */
			init() {
				const _this = this;
				let parentId_ = this.form.curParentId;
				this.axios.get('/ws/sys/datadicts/' + parentId_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.table.datas = res.data;
					} else {

					}
				});
			},
			/**
			 * 查看子节点
			 */
			listChilds(row_) {
				this.history.parents.push({
					name: row_.wKey,
					id: row_.id
				});
				let curParentId_ = this.form.curParentId;
				this.form.paths.push(curParentId_);
				this.form.curParentId = row_.id;
				this.init();
			},
			/**
			 * 显示父节点
			 */
			listParent(item_, index_) {
				//如果已经是最后了，就不用显示
				let parentLength = this.history.parents.length;
				if(index_ == parentLength - 1) {
					return;
				}
				//从数组中截掉
				this.form.curParentId = item_.id;
				this.history.parents.splice(index_ + 1, parentLength - index_ - 1);
				this.init();
			},
			/**
			 * 上一层
			 */
			preList() {
				let preParentId_ = this.form.paths.pop();
				this.form.curParentId = preParentId_;
				this.init();
			},
			/**
			 * 顶层
			 */
			topList() {
				this.form.curParentId = '-1';
				this.form.paths = [];
				this.init();
			},
			/**
			 * 显示新增弹框
			 */
			showAddModal() {
				this.$refs['modal1'].resetFields();
				this.modal1.show = true;
			},
			/**
			 * 显示编辑弹框
			 */
			showEditModal(row) {
				this.queryById(row);
			},
			/**
			 * 根据id查询
			 */
			queryById(row) {
				const _this = this;
				this.axios.get('/ws/sys/datadict/' + row.id + '/' + row.rsv_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.initData(res.data);
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('查询数据字典失败:' + message_);
					}
				});
			},
			/**
			 * 初始化数据
			 */
			initData(data) {
				this.modal1.model.id = data.id;
				this.modal1.model.parentId = data.parentId;
				this.modal1.model.wKey = data.wKey;
				this.modal1.model.displayName = data.displayName;
				this.modal1.model.listIndex = data.listIndex;
				this.modal1.model.wValue = data.wValue;
				this.modal1.show = true;
			},
			/**
			 * 保存弹框1内容
			 */
			saveModal1() {
				this.$refs['modal1'].validate((valid) => {
					if(valid) {
						this.submitModal1();
					} else {
						this.$Message.error('表单验证失败!');
					}
				});
			},
			/**
			 * 提交表单
			 */
			submitModal1() {
				if(this.isEdit) {
					this.editDataDict();
				} else {
					this.saveDataDict();
				}
			},
			/**
			 * 保存数据字典
			 */
			saveDataDict() {
				//设置父级
				this.modal1.model.parentId = this.form.curParentId;
				let postData_ = this.modal1.model;
				const _this = this;
				this.axios.post('/ws/sys/datadict', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('创建数据字典成功');
						_this.modal1.show = false;
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('创建数据字典项失败:' + message_);
					}
				});
			},
			/**
			 * 编辑数据字典
			 */
			editDataDict() {
				let postData_ = this.modal1.model;
				const _this = this;
				this.axios.put('/ws/sys/datadict', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('修改数据字典成功');
						_this.modal1.show = false;
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('修改数据字典项失败:' + message_);
					}
				});
			},
			/**
			 * 刷新缓存
			 */
			fefreshCache() {
				const _this = this;
				this.axios.put('/ws/sys/datadict/fefresh').then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('刷新缓存成功');
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('刷新缓存失败:' + message_);
					}
				});
			},
			/**
			 * 取消弹框1
			 */
			cancelModal1() {
				this.$refs['modal1'].resetFields();
				this.modal1.show = false;
			},
			/**
			 * 删除提示
			 */
			delConfirm(row_) {
				const _this = this;
				this.$confirm({
					title: '操作提示',
					width: 300,
					content: '你确认删除本行记录吗?',
					onOk: function() {
						_this.delDatadictRow(row_);
					}
				});
			},
			/**
			 * 删除数据字典项目
			 */
			delDatadictRow(rowItem_) { //删除行
				let datadictId = rowItem_.id;
				let rsv_ = rowItem_.rsv_;
				const _this = this;
				this.axios.delete('/ws/sys/datadict/' + datadictId + '/' + rsv_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.warning('删除记录成功');
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('删除数据字典记录项失败:' + message_);
					}
				});
			}
		}
	}
</script>

<style>
	.title-row {
		padding: 10px;
	}
</style>